<!--
 * Copyright © 2023
 * @Author: zhangxiang
 * @Date: 2023-05-12 17:43:51
 * @LastEditors: zhangxiang
 * @LastEditTime: 2023-05-12 17:46:31
 * @Description:
 *
-->

<template>
  <el-form
    ref="form"
    class="create-tencent"
    :rules="rules"
    :model="form"
    label-width="auto"
    size="medium"
  >
    <el-form-item class="item" label="云服务商" prop="cloudProvider">
      <el-select
        v-model="form.cloudProvider"
        placeholder="请选择云服务商"
        style="width: 100%"
        :disabled="true"
      >
        <el-option
          v-for="item in cloudProviderOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item class="item right" label="云账户" prop="cloudAccountName">
      <el-select
        v-model="form.cloudAccountName"
        placeholder="请选择云账户"
        style="width: 100%"
        no-data-text="请先选择合适的云服务商"
        :loading="loadingCloudAccountName"
      >
        <el-option
          v-for="item in cloudAccountNameOptions"
          :key="item.cloudAccountName"
          :label="item.cloudAccountName"
          :value="item.cloudAccountName"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="描述" prop="desc">
      <el-input
        v-model="form.desc"
        placeholder="请输入描述"
        type="textarea"
        :rows="3"
      />
    </el-form-item>
  </el-form>
</template>

<script>
import resSelectorMixin from '@/views/mixin/resSelector.js'
import { getRegionList } from '@/api/cn-resource'

export default {
  name: 'CreateTencent',
  components: {},
  mixins: [resSelectorMixin],
  props: {
    cloudSelect: {
      type: String,
      default: '腾讯云'
    }
  },
  data() {
    return {
      cloudProviderType: 'public',
      regionOptions: [],
      chargeTypeOptions: [
        {
          label: '包年包月',
          value: '包年包月'
        },
        {
          label: '按量付费',
          value: '按量付费'
        }
      ],
      internetChargeTypeOptions: [
        {
          label: '按固定带宽计费',
          value: '按固定带宽计费'
        },
        {
          label: '按使用流量计费',
          value: '按使用流量计费'
        }
      ],
      chargePeriodOptions: [
        {
          label: '1个月',
          value: '1个月',
          unit: 'Month',
          period: '1'
        },
        {
          label: '2个月',
          value: '2个月',
          unit: 'Month',
          period: '2'
        },
        {
          label: '3个月',
          value: '3个月',
          unit: 'Month',
          period: '3'
        },
        {
          label: '半年',
          value: '半年',
          unit: 'Month',
          period: '6'
        },
        {
          label: '1年',
          value: '1年',
          unit: 'Month',
          period: '12'
        },
        {
          label: '2年',
          value: '2年',
          unit: 'Month',
          period: '24'
        },
        {
          label: '3年',
          value: '3年',
          unit: 'Month',
          period: '36'
        }
      ],
      form: {
        cloudProvider: '',
        cloudAccountName: '',
        name: '',
        region: '', // 区域
        chargeType: '包年包月', // 计费方式
        internetChargeType: '', // 计费类型
        bandwidth: 5, // 带宽
        chargePeriod: '', // 购买时长
        period: '', // 时长数量
        pricingCycle: '', // 时长单位
        desc: ''
      },
      // 校验规则
      rules: {
        cloudProvider: [
          { required: true, message: '请选择云服务商', trigger: 'change' }
        ],
        cloudAccountName: [
          { required: true, message: '请选择云账户', trigger: 'change' }
        ],
        name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
        region: [{ required: true, message: '请选择区域', trigger: 'change' }],
        chargeType: [
          { required: true, message: '请选择计费方式', trigger: 'change' }
        ],
        internetChargeType: [{ required: true, message: '请选择计费类型' }],
        bandwidth: [{ required: true, message: '请设置带宽' }],
        chargePeriod: [{ required: true, message: '请选择购买时长' }]
      }
    }
  },
  computed: {
    /**
     * @description: 带宽最大值
     * @return {*}
     */
    maxBandWidth() {
      return this.form.chargeType === '包年包月' ? 1000 : this.form.internetChargeType === '按使用流量计费' ? 200 : 500
    }
  },
  watch: {
    /**
     * @description: 监听 购买时长 变化
     * @return {*}
     */
    'form.chargePeriod': {
      handler(newVal) {
        if (newVal) {
          const chargeFind = this.chargePeriodOptions.find(item => {
            return item.value === newVal
          })
          if (chargeFind) {
            this.form.period = chargeFind.period
            this.form.pricingCycle = chargeFind.unit
          } else {
            this.form.period = ''
            this.form.pricingCycle = ''
          }
        } else {
          this.form.period = ''
          this.form.pricingCycle = ''
        }
      },
      immediate: true,
      deep: true
    },
    /**
     * @description: 云商监听
     * @return {*}
     */
    'form.cloudProvider': {
      handler(newVal) {
        if (newVal) {
          // 获取区域
          this.form.region = ''
          this.getRegionList()
        }
      },
      immediate: true
    },
    cloudSelect: {
      handler(newVal) {
        if (newVal) {
          this.form.cloudProvider = this.cloudSelect
        }
      },
      immediate: true
    }
  },
  mounted() {},
  methods: {
    /**
     * @description: 计费模式 改变
     * @param {*} val
     * @return {*}
     */
    chargeTypeChange(val) {
      if (val === '按量付费') {
        this.form.chargePeriod = ''
        this.form.internetChargeType = '按固定带宽计费'
        this.form.bandwidth = 5
      } else if (val === '包年包月') {
        this.form.internetChargeType = ''
        this.form.bandwidth = 5
      }
    },
    /**
     * @description: 获取区域
     * @return {*}
     */
    getRegionList() {
      getRegionList({
        keyword: this.form.cloudProvider,
        pageNum: 1,
        pageSize: 100
      }).then((res) => {
        if (res.data) {
          this.regionOptions = Array.isArray(res.data.data)
            ? res.data.data
            : []
        } else {
          this.regionOptions = []
        }
      })
    },
    /**
     * @description: 校验
     * @return {*}
     */
    validateForm(callback) {
      this.$refs.form.validate((valid, obj) => {
        if (valid) {
          callback(this.form)
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
@import "@/assets/css/common.less";
.create-tencent {
  .item {
    display: inline-block;
    width: calc(50% - 10px);
    &.right {
      margin-left: 20px;
    }
  }

  .radio {
    margin-right: 10px;
  }
}
</style>
